import React, { useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { IStateType, IListItem } from '../store/reducer'
import { del_list, add_list } from '../store/actions'
const App: React.FC = () => {
	const list = useSelector((state: IStateType) => state.list )
	const dispatch = useDispatch()
	const handleDelete = (id: number) => {
		dispatch(del_list(id))
	}

	const handleSubmit = () => {
		dispatch(add_list(item))
	}
	const [item, setItem] = useState<IListItem>({ name: '', age: 0, sex: '女' })
 	return <div>
		<input type="text" value={ item.name} onChange={ (e) => setItem({ ...item, name: e.target.value }) }/>
		<input type="text" value={ item.age } onChange={ (e) => setItem({ ...item, age: +e.target.value }) }/>
		<select name="" id="" value={item.sex} onChange={ (e) => setItem({ ...item, sex: (e.target.value as '男' | '女') }) }>
			<option value="女">女</option>
			<option value="男">男</option>
		</select>
		<button onClick={ () => handleSubmit() }>提交</button>
		<ul>
			{
				list.length > 0 && list.map((v, i) => {
					return <li key={i}>
						<p>name: { v.name }</p>
						<p>age: { v.age }</p>
						<p>sex: { v.sex }</p>
						<button onClick={ () => handleDelete(v.id as number) }>删除</button>
					</li>
				})
			}
		</ul>
	</div>
}


export default App